<template>
  <div class="content">
    <el-tabs type="card">
      <el-form label-width="80px">
        <el-form-item label="搜索">
          <el-input id="name" icon="search" name="title" placeholder="请输入名字 " style="width:200px"/>
          <el-button type="primary" style="margin-left: 14px;" @click = "curriculumList">查询</el-button>
          <el-button type="primary" style="margin-left: 14px;" @click = "AgentManagementAdd">新增代理商</el-button>
        </el-form-item>
        <el-table :data="curriculumListData" border fit highlight-current-row style="width: 100%">
          <el-table-column align="center" label="区域" prop="province.label"/>
          <el-table-column align="center" label="公司" prop="company"/>
          <el-table-column align="center" label="负责人" prop="displayName"/>
          <el-table-column align="center" label="创建时间" prop="createdTime"/>
          <el-table-column
            align="center"
            label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="AgentManageShow(scope.row)">查看</el-button>
              <el-button type="text" size="small" @click="AgentManageEdit(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="dialogVisiblePassword(scope.row)">重置密码</el-button>
              <el-button type="text" size="small" @click="AgentLog(scope.row)">日志</el-button>
              <el-button type="text" size="small" @click="dialogVisibleTimeShow(scope.row)">续时</el-button>
              <el-button
                v-if="scope.row.status.label ==='启用'"
                type="text"
                size="small"
                @click="dialogEndShow(scope.row.oid)">终止
              </el-button>
              <el-button
                v-if="scope.row.status.label ==='终止'"
                type="text"
                size="small"
                @click="dialogStartShow(scope.row.oid)">启用
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </el-tabs>
    <el-dialog
      :visible.sync="dialogPasswordBox"
      :before-close="handleClose"
      title="重置密码"
      width="30%">
      <el-form v-model="password" label-width="80px">
        <el-form-item label="新密码">
          <el-input id="name" v-model="password.newPassword" icon="search" name="newPassword" placeholder="请输入新密码" style="width:200px"/>
        </el-form-item>
        <input v-model="password.oid" type="hidden" name="" value="">
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogPasswordBox = false">取 消</el-button>
        <el-button type="primary" @click="dialogPasswordHide()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogEndShowBox"
      :before-close="handleClose"
      title="停止"
      width="30%">
      <span>确定要停止？</span>
      <input v-model="demo.oid" type="hidden" name="" value="">
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogEndShowBox = false">取 消</el-button>
        <el-button type="primary" @click="dialogEndShowHide()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogStartShowBox"
      :before-close="handleClose"
      title="启用"
      width="30%">
      <span>确定要启用？</span>
      <input v-model="demo.oid" type="hidden" name="" value="">
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogStartShowBox = false">取 消</el-button>
        <el-button type="primary" @click="dialogStartHide()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogVisibleTime"
      :before-close="handleClose"
      title="续时"
      width="30%">
      <el-select v-model="demo.years" placeholder="请选择" style="width: 160px;">
        <el-option
          v-for="item in years"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <input v-model="demo.oid" type="hidden" name="" value="">
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleTime = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleTimeHide()">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
// import tabPane from '@/components/tabPane'
import axios from "axios";
import api from "@/api/agent";
import { Message } from "element-ui";
export default {
  data() {
    return {
      activeName: {
        name: ""
      },
      password: {
        name: "",
        newPassword: "",
        agianPassword: ""
      },
      list: [
        {
          mm: {
            nn: "mmmmm",
            kk: "3423",
            dd: "2323"
          },
          ii: "888"
        }
      ],
      years: [
        {
          value: "1",
          label: "1个月"
        },
        {
          value: "3",
          label: "3个月"
        },
        {
          value: "6",
          label: "6个月"
        },
        {
          value: "12",
          label: "1年"
        },
        {
          value: "24",
          label: "2年"
        },
        {
          value: "36",
          label: "3年"
        }
      ],
      dialogEndShowBox: false,
      dialogStartShowBox: false,
      dialogVisibleTime: false,
      dialogPasswordBox: false,
      curriculumListData: [],
      materialData: [],
      demo: {
        name: ""
      },
      username: "",
      curriculumListData: [],
      appsData: []
    };
  },
  mounted() {
    this.curriculumList();
  },
  methods: {
    dialogPasswordHide() {
      const passwordData = {
        newPwd: this.password.newPassword,
        oid: this.password.oid
      };
      api.restPassword(passwordData).then(({ success, data }) => {
        this.$message({
          showClose: true,
          message: "重置成功!",
          type: "success"
        });
        this.dialogPasswordBox = false;
        this.curriculumList();
      });
    },
    dialogVisiblePassword(tab) {
      this.dialogPasswordBox = true;
      this.password.oid = tab.userOid;
    },
    timeFormat(time) {
      var d = new Date(time);
      var times =
        d.getFullYear() +
        "-" +
        (d.getMonth() + 1) +
        "-" +
        d.getDate() +
        " " +
        d.getHours() +
        ":" +
        d.getMinutes() +
        ":" +
        d.getSeconds();
      return times;
    },
    AgentLog(tab) {
      this.$router.push("/AgentManagement/AgentLogShow?oid=" + tab.oid);
    },
    dialogEndShowHide() {
      this.dialogEndShowBox = false;
      api.agentTermination(this.demo.oid).then(({ success, data }) => {
        this.$message({
          showClose: true,
          message: "停止成功!",
          type: "success"
        });
        this.curriculumList();
      });
    },
    dialogEndShow(tab) {
      this.dialogEndShowBox = true;
      this.demo.oid = tab;
    },
    dialogStartHide() {
      this.dialogStartShowBox = false;
      api.agentStartup(this.demo.oid).then(({ success, data }) => {
        this.$message({
          showClose: true,
          message: "启用成功！",
          type: "success"
        });
        this.curriculumList();
      });
    },
    dialogStartShow(tab) {
      this.dialogStartShowBox = true;
      this.demo.oid = tab;
    },
    editDo(tab) {
      console.log(tab);
    },
    dialogVisibleTimeShow(tab) {
      this.dialogVisibleTime = true;
      this.demo.oid = tab.oid;
    },
    dialogVisibleTimeHide() {
      this.dialogVisibleTime = false;
      const data = {
        oid: this.demo.oid,
        years: this.demo.years
      };
      api
        .Continued(this.demo.oid, this.demo.years, data)
        .then(({ success, data }) => {
          this.$message({
            showClose: true,
            message: "续时成功！",
            type: "success"
          });
          this.curriculumList();
        });
    },
    handleClose(done) {
      // this.$confirm('确认关闭？')
      //   .then(_ => {

      //   })
      //   .catch(_ => {});
      done();
    },
    AgentManageShow(tab) {
      this.$router.push("/AgentManagement/AgentManagementShow?oid=" + tab.oid);
    },
    AgentManageEdit(tab) {
      this.$router.push("/AgentManagement/AgentManagementEdit?oid=" + tab.oid);
    },
    AgentManagementAdd() {
      this.$router.push("/AgentManagement/AgentManagementAdd");
    },
    curriculumList() {
      const payload = { keyword: document.getElementById("name").value };
      api.fetchAgentList(payload).then(response => {
        if (response) {
          this.curriculumListData = response;
          response.map((item, index) => {
            this.curriculumListData[index].createdTime = this.timeFormat(
              item.createdTime
            );
          });
        }
      });
    },
    programmeAdd() {
      this.$router.push("programmeAdd");
    },
    editClick(tab, event) {
      var path =
        "appEdit?oid=" +
        tab.oid +
        "&name=" +
        tab.name +
        "&packageName=" +
        tab.packageName;
      this.$router.push(path);
    },
    appAdd() {
      this.$router.push("appAdd");
    }
  }
};
</script>

<style scoped>
.tab-container {
  margin: 30px;
}
.content {
  margin-left: 30px;
  margin-top: 30px;
}
</style>
